<script src="../router/index.js"></script>
<template>
  <div id="userRole">
    <div class="content">
      <div class="title">欢迎加入聊天室</div>
      <div class="head-img-cont">
        <div class="head-img">
          <img class="img" :src="headImgUrl" alt=""/>
          <div class="img-btn" @click="choiceState = true">点击更换头像</div>
        </div>
      </div>
      <div class="name-cont"><input class="input" type="text" v-model="name" placeholder="请输入姓名"
                                    placeholder-style="border:none"/></div>
      <div class="submit-btn">
        <div class="btn" @click="joinChat">加入</div>
      </div>
    </div>
    <div class="mask" @click.self="maskClick" v-if="choiceState"></div>
    <div class="choice-cont" :class="{ 'mask-transition': choiceState }">
      <div class="img-list">
        <div class="img-item" v-for="(v, i) in imgList" :key="i">
          <img class="img-item-url" :src="v.imgUrl" alt="" @click="imgItemClick(v, i)"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Socket from '../socket/index'

export default {
  name: 'userRole',
  data() {
    return {
      headImgUrl: require('@/static/head/1.jpg'),
      headImgIndex: 1,
      name: '',
      choiceState: false
    };
  },
  methods: {
    imgItemClick(item, index) {
      this.headImgUrl = item.imgUrl;
      this.headImgIndex = index + 1;
    },
    maskClick() {
      this.choiceState = false;
    },
    async joinChat() {

      if (this.name.length !== 0) {
        console.log(this.name)
        // eslint-disable-next-line no-unused-vars
        Socket().then(res => {
          if (res) {
            this.$router.push({
              name: 'chatPage',
              params: {
                name: this.name,
                headImgUrl: this.headImgUrl,
              }
            }).then(res => {
              this.ipcRenderer.send('join', '渲染进程准备跳转页面')
              this.ipcRenderer.on('joinReply', function (event, arg) {
                console.log(arg)
              })
            })
          } else {
            alert('网络连接失败')
          }
        })
      } else {
        alert('请输入姓名')
      }
    },
    random(min, max) {
      return Math.random() * (max - min) + min;
    }
  },

  computed: {
    imgList: function () {
      const arr = [];
      for (let i = 0; i < 20; i++) {
        arr.push({
          imgUrl: require(`@/static/head/${i + 1}.jpg`)
        });
      }
      return arr;
    }
  }
};
</script>
<style scoped lang="less">
#userRole {
  width: 100%;
  height: 100%;
  * {
  }
  @headImgWH: 60px;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 30px;
    .title {
      font-size: 20px;
      margin-bottom: 30px;
    }
    .head-img-cont {
      margin-bottom: 30px;
      width: 150px;
      height: calc(@headImgWH + 20px);
      .head-img {
        width: 150px;
        height: @headImgWH;
        .img {
          width: @headImgWH;
          height: @headImgWH;
          border-radius: 50%;
        }
        .img-btn {
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .name-cont {
      margin-bottom: 30px;
      width: 120px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #f52443;
      .input {
        width: 80px;
        text-align: center;
        font-size: 14px;
        border: none;
        &:focus-visible, &:focus {
          border: none;
          outline: none;
        }
      }
    }
    .submit-btn {
      width: 80px;
      height: 30px;
      .btn {
        width: 80px;
        color: #fff;
        background-color: #f52443;
        line-height: 30px;
        height: 30px;
      }
    }
  }
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5)
  }
  .choice-cont {
    position: fixed;
    transition: bottom .5s;
    background-color: #fff;
    bottom: -250px;
    width: 100%;
    height: 250px;
    padding-top: 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    &.mask-transition {
      bottom: 0;
    }
    .img-list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .img-item {
        width: 20%;
        height: 40px;
        text-align: center;
        .img-item-url {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>
